<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>登陆 - 用户中心</title>
		<%@ include file="/common/include/title.jsp" %>
		<%-- 表单验证 --%>
		<link rel="stylesheet" href="${rootpath }/common/resource/bootstrapvalidator/css/bootstrapValidator.css"/>
		<script type="text/javascript" src="${rootpath }/common/resource/bootstrapvalidator/js/bootstrapValidator.js"></script>
	    
	    <script type="text/javascript">
			$(function (){
			    $('#form').bootstrapValidator({
			    	container: 'tooltip',
			        feedbackIcons: {
			            valid: 'glyphicon glyphicon-ok',
			            invalid: 'glyphicon glyphicon-remove',
			            validating: 'glyphicon glyphicon-refresh'
			        },
			        fields: {
			        	email: {
			                validators: {
			                	notEmpty:
		                    	{
	                    			message: '邮箱不能为空'
		                    	},
		                        stringLength: {
		                            min: 6,
		                            max: 50,
		                            message: '密码长度必须在6到50位之间'
		                        },
		                    	emailAddress:
		                    	{
	                    			message: '请输入正确的邮箱'
		                    	}
			                }
			            },
			        	password: {
			                validators: {
			                	notEmpty:
		                    	{
	                    			message: '密码不能为空'
		                    	},
		                        stringLength: {
		                        	min: 6,
		                            max: 50,
		                            message: '密码长度必须在6到18位之间'
		                        }
			                }
			            },
			        	confirmPassword: {
			                validators: {
			                	notEmpty:
		                    	{
	                    			message: '确认密码不能为空'
		                    	},
		                        stringLength: {
		                        	min: 6,
		                            max: 50,
		                            message: '确认密码长度必须在6到50位之间'
		                        },
		                        identical: {
		                            field: 'password',
		                            message: '两次密码不一样'
		                        }
			                }
			            },
			            code: {
			            	validators: {
			                	notEmpty:
		                    	{
	                    			message: '验证码不能为空'
		                    	},
		                        stringLength: {
		                            min: 4,
		                            max: 4,
		                            message: '验证码长度必须在4到4位之间'
		                        }
			                }
			            }
			        }
			    });
			});
		</script>
	</head>
	<body>
		<%@ include file="/common/include/header.jsp" %>
		<div class="container">
			<div class="col-sm-8 col-sm-offset-1">
				<form id="form" class="form-horizontal" method="post" action="${rootpath }/loginSubmit.html">
					<input type="hidden" name="returnUrl" value="${param.returnUrl }">
					
					<h2 class="col-sm-offset-1 form-signin-heading">登陆</h2>
					<div class="form-group">
						<label for="email" class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-8">
							<input type="text" id="email" name="email" class="form-control" value="${requestScope.users.email }" placeholder="邮箱">
						</div> 
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-8">
							<input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码"/>
						</div>
					</div>
					<c:if test="${sessionScope.randFiledCount >= 3}">
						<div class="form-group">
							<label for="email" class="col-sm-2 control-label">验证码</label>
							<div class="col-sm-8">
								<div class="input-group">
									<span class="input-group-addon">
										<a href="#" tabindex="-1" onclick="return refreshCode('imgCode');">
											<img id="imgCode" src="${rootpath }/randImg.html" title="点击刷新验证码" width="75" height="20" />
										</a>
									</span>
									<input type="text" id="code" name="code" class="form-control" placeholder="验证码">
								</div>
							</div>
						</div>
					</c:if>
					<div class="form-group">
						<div class="col-sm-8 col-sm-offset-2">
							<div class="input-group">
								<div class="checkbox">
									<label>
										<input type="checkbox" value="remember-me">
										记住我
									</label>
								</div>
								<span class="input-group-addon">
									<a href="${rootpath }/forgetPass.html">忘记密码</a>
								</span>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-8 col-sm-offset-2">
							<button class="btn btn-lg btn-primary" type="submit">登陆</button>
							<a href="${rootpath }/regsiter.html" class="btn btn-lg btn-primary">注册</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		<%@ include file="/common/include/footer.jsp" %>
	</body>
</html>